<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../libs/bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/weixiujihua_tiaozhuan.css">
    <link rel="stylesheet" href="../css/weixiujihua.css">
    <script src="../js/jquery-3.1.1.js"></script>
    <script src="../libs/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <script src="../js/allData.js"></script>
    <script src="../js/renyuanguanli.js"></script>
</head>

<body>

    <div class="container-fluid header">
        <h3>维修记录</h3>
        <div class="header_top">
            <div class="zhuangbei_right">
                <span>维修单号:</span>
                <span id="danhao_val">201911110123</span>
            </div>
            <div class="zhuangbei_box">
                <div class="zhuangbei_left">
                    <span>故障装备:</span>
                    <span>轻型步战车 (ABC123456)</span>
                </div>
            </div>
            <div class="zhuangbei_time">
                <div class="zhuangbei_time_left">
                    <span>计划时间</span>
                    <span id="jihuashijian">2020-12-3</span>
                </div>
            </div>
        </div>

        <div class="miaoshuxinxi clear">
            <span>故障描述:</span>
            <div>
                <span>发动机发动不了，刹车也失灵了。发动机发动不了，刹车也失灵了。发动机发动不了，刹车也失灵了。发动机发动不了，刹车也失灵了。发动机发动不了，刹车也失灵了。发动机发动不了，刹车也失灵了。发动机发动不了，刹车也失灵了。发动机发动不了，刹车也失灵了。发动机发动不了，刹车也失灵了。</span>
            </div>
        </div>


        <div class="xuanxiangka_box">
            <ul class="clear">
                <li onclick="btn(this,0)"><a href="#">维修过程</a></li>
                <li onclick="btn(this,1)"><a href="#">人员抽组</a></li>
                <li onclick="btn(this,2)"><a href="#">器材调用</a></li>
                <li onclick="btn(this,3)"><a href="#">维修方案</a></li>
            </ul>
            <div class="cont_box">
                <div class="content clear">
                    <div class="content_null">
                    </div>
                    <div class="content_box">
                        <p><span>维修中</span><span>李四</span><span>2019-11-20 10:14:52</span> </p>
                        <p>从仓库调来的电动千斤顶真好使，效率提升了很多。</p>
                        <div class="clear">
                            <div>
                                <i class="glyphicon glyphicon-picture"></i>
                            </div>
                            <div>
                                <i class="glyphicon glyphicon-picture"></i>
                            </div>
                            <div>
                                <i class="glyphicon glyphicon-picture"></i>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="content clear">
                    <div class="content_null">
                    </div>
                    <div class="content_box">
                        <p><span>维修中</span><span>李四</span><span>2019-11-20 10:14:52</span> </p>
                        <p>从仓库调来的电动千斤顶真好使，效率提升了很多。</p>
                        <div class="clear">
                            <div>
                                <i class="glyphicon glyphicon-picture"></i>
                            </div>
                            <div>
                                <i class="glyphicon glyphicon-picture"></i>
                            </div>
                            <div>
                                <i class="glyphicon glyphicon-picture"></i>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="content clear">
                    <div class="content_null">
                    </div>
                    <div class="content_box">
                        <p><span>维修中</span><span>李四</span><span>2019-11-20 10:14:52</span> </p>
                        <p>从仓库调来的电动千斤顶真好使，效率提升了很多。</p>
                        <div class="clear">
                            <div>
                                <i class="glyphicon glyphicon-picture"></i>
                            </div>
                            <div>
                                <i class="glyphicon glyphicon-picture"></i>
                            </div>
                            <div>
                                <i class="glyphicon glyphicon-picture"></i>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="content clear">
                    <div class="content_null">
                    </div>
                    <div class="content_box">
                        <p><span>器材调用</span></p>
                        <p>油泵（QC5894231）、油泵（QC5894231）、油泵（QC5894231）、油泵（</p>
                    </div>

                </div>
                <div class="content clear">
                    <div class="content_null">
                    </div>
                    <div class="content_box">
                        <p><span>人员抽组</span></p>
                        <p>橙伟霆（维修一部、电工）；橙伟霆（维修一部、电工）；橙伟霆（维修一部、</p>
                    </div>
                </div>
                <div class="content clear">
                    <div class="content_null">
                    </div>
                    <div class="content_box">
                        <p><span>制定方案</span></p>
                        <p>根据对步战车的故障点分析，决定先检查刹车泵，再更换刹车片，根据对步战</p>
                    </div>
                </div>
                <div class="content clear">
                    <div class="content_null">
                    </div>
                    <div class="content_box">
                        <p><span>制定计划</span></p>
                        <p>轻型步战车（865265895）发动机启动不了，刹车失灵，轻型步战车（865265895）发动机启动不了，刹车失灵，轻型步战车（865265895）
                            发动机启动不了，刹车失灵，</p>
                    </div>
                </div>
            </div>

            <div class="cont_box">
                <table class="table" id="table_renyuan">
                    <thead>
                        <tr>
                            <th>姓名</th>
                            <th>部门</th>
                            <th>工种</th>
                            <th>工种等级</th>
                        </tr>
                    </thead>
                    <tbody id="tbody_renyaun">

                    </tbody>
                </table>
            </div>

            <div class="cont_box">
                <div class="cont_top clear">
                    <div>
                        <span>器材名称</span>
                        <input type="text" onfocus="this.placeholder=''" onblur="this.placeholder='请输入器材名称'"
                            placeholder="请输入器材名称">
                    </div>
                    <div>
                        <span>调用数量</span>
                        <input type="text" onfocus="this.placeholder=''" onblur="this.placeholder='18'"
                            placeholder="18">
                    </div>
                    <button>加入明细</button>
                </div>
                <table class="table" id="mingxi_table">
                    <thead>
                        <tr>
                            <th>序号</th>
                            <th>器材编号</th>
                            <th>器材名称</th>
                            <th>规格型号</th>
                            <th>单位</th>
                            <th>区域</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="tbodys">

                    </tbody>
                </table>

                <div class="page_box clear">
                    <div class="pageNum">
                        <span>共<span>10</span>页/ <span>100</span>条数据</span>
                        <div class="pageBtn_box clear">
                            <div id="preBtn" onclick="prevBtn()">
                                <i class="glyphicon glyphicon-chevron-left"></i>
                            </div>
                            <div id="pageBox">

                            </div>
                            <div id="nextBtn" onclick="nextBtn()">
                                <i class="glyphicon glyphicon-chevron-right"></i>
                            </div>
                        </div>

                        <div class="tiaozhuan_box">
                            <span>转至</span>
                            <input type="text" value="1" id="tiaozhuan">
                            <span>页</span>

                            <a href="#" onclick="tiaozhuan()">跳转</a>
                        </div>
                    </div>
                </div>


                <div class="modal fade" tabindex="-1" role="dialog" id="myModal">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                        aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title">提示</h4>
                            </div>
                            <div class="modal-body">
                                <p>您确定要删除吗该条数据吗？</p>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                <button type="button" class="btn btn-primary" onclick="del()">确定</button>
                            </div>
                        </div><!-- /.modal-content -->
                    </div><!-- /.modal-dialog -->
                </div><!-- /.modal -->

                <!-- 提示框 -->

                <div class="tishikuang">
                    <i class="glyphicon glyphicon-ok"></i>
                    删除成功
                </div>
            </div>


            <div class="cont_box fangan_box clear">
                <p>维修方案</p>
                <div class="text_box">
                    <div>
                        <p> 1.首先检查点火器是否正常，如果有问题，更换点火器，如果正常，继续检查发动机。。。</p>
                        <p> 1.首先检查点火器是否正常，如果有问题，更换点火器，如果正常，继续检查发动机。。。</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 登录提示弹框 -->
        <div class="modal fade" id="myModals" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
            aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" id="myModalLabel">温馨提示</h4>
                    </div>
                    <div class="modal-body">您还没有登录，请先登录</div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary queding">确定</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>
    </div>

    <script>
        let user = JSON.parse(sessionStorage.getItem('user'));
        // let userName = document.querySelector('.register_box>span')
        // console.log(user);

        if (user == null) {
            $('#myModals').modal('show')
        } else {
            $('.register_box>span').text(user.username)
        }
        $('.queding').click(function () {
            location.href = '../login.html'
        })

        let maxPage;
        let thePage = 0;
        let fenyeList = guanLiList;
        let renyaun = menu;

        let jihuaTime = JSON.parse(sessionStorage.getItem('jihuaTime'));
        let danhao = JSON.parse(sessionStorage.getItem('danhao'));
        $('#jihuashijian').text(jihuaTime.replace(/\//g, '-'))
        $('#danhao_val').text(danhao)
        // 渲染页面
        function showTable_renyuan(data) {
            $('#tbody_renyaun').html('');
            $.each(data, (index, item) => {
                $('#tbody_renyaun').append(`
                    <tr>
                        <td>${item.xingming}</td>
                        <td>${item.bumen}</td>
                        <td>${item.work}</td>
                        <td>${item.level}</td>
                    </tr>
                `)
            })
        }
        showTable_renyuan(renyaun)
        // 渲染页面
        function showTable(data) {
            $('#tbodys').html('');
            $.each(data, (index, item) => {
                $('#tbodys').append(`
                    <tr>
                        <td>${index+1}</td>
                        <td>${item.bianhao}</td>
                        <td>${item.name}</td>
                        <td>${item.xinghao}</td>
                        <td>${item.danwei}</td>
                        <td>${item.quyu}</td>
                        <td>
                            <button class="btn_chakan tiaozhuan" data-item = '${JSON.stringify(item)}'>
                                <i class="glyphicon glyphicon-eye-open"></i>
                            </button>
                            <button class="btn_shanchu del" data-id = '${item.danhao}' data-item = '${JSON.stringify(item)}'>
                                <i class="glyphicon glyphicon-trash"></i>    
                            </button>
                        </td>
                    </tr>
                `)
            })
        }


        // 根据数据源渲染每一页的数据
        function fenye(data, yema) {
            let qishiye = (yema - 1) * 8;
            let xuanranArr = data.slice(qishiye, qishiye + 8);
            showTable(xuanranArr);

            thePage = yema;

            let num = $('.pageItem').text();
            // console.log(num.length);
            for (let i = 0; i < num.length; i++) {
                $('.pageItem').eq(i).css({
                    backgroundColor: '',
                    color: '#969494'
                })
            }
            $('.pageItem').eq(yema - 1).css({
                backgroundColor: '#6554C0',
                color: '#fff'
            })
        }


        // 根据页码渲染分页按钮
        function xuanranPage(data) {
            maxPage = Math.ceil(data.length / 8);
            $('#pageBox').html('')
            for (let i = 1; i <= maxPage; i++) {
                $('#pageBox').append(`
                    <div class='pageItem'>${i}</div>
                `)
            }
        }
        xuanranPage(guanLiList)
        fenye(guanLiList, 1)

        // 点击按钮，实现页面渲染新数据
        $('#pageBox').on('click', '.pageItem', function () {
            let num = parseInt($(this).text());
            fenye(guanLiList, num)
        })

        // 上一页
        function prevBtn() {
            if (thePage != 1) {
                let page = thePage - 1;
                fenye(guanLiList, page)
            }
        }

        //下一页
        function nextBtn() {
            if (thePage < maxPage) {
                let page = thePage + 1;
                fenye(guanLiList, page)
            }
        }

        // 分页跳转
        function tiaozhuan() {
            let val = document.getElementById('tiaozhuan').value;
            fenye(guanLiList, val)
        }


        // 删除
        let num = []
        $('#tbodys').on('click', '.del', function () {
            var data_item = JSON.parse($(this).attr('data-item'));
            var data_id = $(this).attr('data-id');
            $('#myModal').modal('toggle')
            num.push(data_id)
        })

        function del() {
            let time
            for (let i = 0; i < fenyeList.length; i++) {
                if (fenyeList[i].danhao == num[0]) {
                    fenyeList.splice(i, 1);
                    num = [];
                    time = setInterval(() => {
                        $('.tishikuang').css({
                            position: 'absolute',
                            top: (size[0] - 100) / 2 + 'px',
                            left: (size[1] - 300) / 2 + 'px',
                            display: 'block'
                        })
                    }, 500);
                    break;
                }
            }
            $('#myModal').modal('hide')
            xuanranPage(fenyeList);
            fenye(fenyeList, thePage);
            setTimeout(() => {
                clearInterval(
                    time
                )
                $('.tishikuang').css({
                    display: 'none'
                })
            }, 1500);

            if(fenyeList.length == 0){
                    fenyeList = weixiuList
                    show(1)
                }
        }


        // 提示框
        let size = []

        function tishi() {
            let tishikuang = document.getElementsByClassName('tishikuang');
            let top = document.body.clientHeight
            let left = document.body.clientWidth
            size.push(top, left);
        }
        tishi()
        console.log(size);
        $('.tishikuang').css({
            position: 'absolute',
            top: (size[0] - 100) / 2 + 'px',
            left: (size[1] - 100) / 2 + 'px',
            display: 'none'
        })

        let lis = document.querySelectorAll('.xuanxiangka_box>ul>li');
        let contents = document.querySelectorAll('.cont_box');

        function btn(obj, num) {
            for (let i = 0; i < lis.length; i++) {
                if (contents[i] == contents[num]) {
                    contents[num].style.display = 'block'
                } else {
                    contents[i].style.display = 'none'
                }
            }
        }
        btn(lis[0], 0)
    </script>
</body>

</html>